<template>
  <div class="common-layout">
    <el-container>
      <el-aside width="200px">
          <div style="background-color: #303e4e;height: 100vh;">
              <div style="height: 60px;line-height: 60px;margin-left: 20px; color: #fff;">
                  <div>盛博灿科技有限公司</div>
              </div>
              <div>
                  <el-row>
                    <el-col>
                      <el-menu
                          router
                          active-text-color="#fff"
                          background-color="#303e4e"
                          class="el-menu-vertical-demo"
                          default-active="2"
                          text-color="#fff"
                          unique-opened
                        >
                        <el-menu-item index="/home">
                          <el-icon><House /></el-icon>
                          <span>控制台</span>
                        </el-menu-item>

                        <el-menu-item index="/navigation">
                          <el-icon><Calendar /></el-icon>
                          <span>导航管理</span>
                        </el-menu-item>

                        <el-sub-menu index="/basic">
                          <template #title>
                            <el-icon><Document /></el-icon>
                            <span>内容管理</span>
                          </template>
                            <el-menu-item index="/basic/product">产品管理</el-menu-item>
                            <el-menu-item index="/basic/service">服务管理</el-menu-item>
                            <el-menu-item index="/basic/case">案例管理</el-menu-item>
                            <!-- <el-menu-item index="/basic/evaluate">评价管理</el-menu-item> -->
                            <el-menu-item index="/basic/news">新闻动态管理</el-menu-item> 
                        </el-sub-menu>

                        <el-sub-menu index="/content">
                          <template #title>
                            <el-icon><Setting /></el-icon>
                            <span>基础信息维护</span>
                          </template>
                            <el-menu-item index="/content/company">公司信息维护</el-menu-item>
                            <el-menu-item index="/content/swiper">轮播图管理</el-menu-item>
                            <el-menu-item index="/content/question">用户咨询设置</el-menu-item>
                            <el-menu-item index="/content/information">用户信息管理</el-menu-item>
                        </el-sub-menu>
                      </el-menu>
                    </el-col>
                  </el-row>
              </div>
          </div>
      </el-aside>
      <el-container>
        <div style="height: 100vh;width: 100%;;overflow: auto;">
          <el-header style="display: flex;align-items: center;justify-content: space-between;">
              <div>
                  <div style="display: flex;font-size: 14px;color: #8793a2;">
                    欢迎登录盛博灿科技有限公司
                  </div>
              </div>
              <div style="display: flex;align-items: center;">
                <el-input v-model="input" style="width: 240px" placeholder="请输入关键词进行搜索" />
                <div style="width: 1px;height: 20px;border-left: 1px solid #ceced3;margin: 0 30px;"></div>
                <div style="margin-right: 20px;display: flex;align-items: center;">
                  <el-avatar shape="square" :size="35" :src="baseURL_dev+User.avatar" />
                  <!-- <span style="margin-left: 10px;font-size: 14px;color: #8793a2;">系统管理员</span> -->
                  <div style="font-weight: 100;font-size: 14px;">
                    <!-- SUPER_ADMIN -->
                    <el-dropdown>
                      <span class="el-dropdown-link" style="margin: 0 10px;">
                        {{ User.userName }}<el-icon class="el-icon--right"><arrow-down /></el-icon>
                      </span>
                      <template #dropdown>
                        <el-dropdown-menu>
                          <el-dropdown-item @click="loginOut">退出登录</el-dropdown-item>
                        </el-dropdown-menu>
                      </template>
                    </el-dropdown>
                  </div>
                </div>
              </div>
          </el-header>
          <el-main style="background-color: #f6f6f6;">
            <div style="display: flex;align-items: center;margin-bottom: 20px;" v-show="navArray.length>0">
              <el-breadcrumb :separator-icon="ArrowRight">
                  <el-breadcrumb-item v-for="(item,index) in navArray" :to="{ path: item.path }">
                    <el-button style="background-color: #fff;">
                      {{ item.meta.title }}
                    </el-button>
                  </el-breadcrumb-item>
              </el-breadcrumb>
            </div>
            <router-view></router-view>
          </el-main>
        </div>
      </el-container>
    </el-container>
    <el-dialog v-model="dialogVisible" title="修改密码" width="500">
      <div>
        <div style="background-color:#fff;padding:20px">
          <div>
            <div style="margin-left: 30px;display: flex;align-items: center;">
              <div style="margin-right: 10px;font-size: 14px;width: 80px;">
                当前密码
              </div>
              <el-input v-model="addForm.oldPassword" type="password" style="width: 240px;border-radius: 0" placeholder=""></el-input>
            </div>
            <div style="margin-left: 30px;display: flex;align-items: center;margin-top: 15px;">
              <div style="margin-right: 10px;font-size: 14px;width: 80px;">
                新密码
              </div>
              <el-input v-model="addForm.password" type="password" style="width: 240px;border-radius: 0" placeholder=""></el-input>
            </div>
            <div style="margin-left: 30px;display: flex;align-items: center;margin-top: 15px;">
              <div style="margin-right: 10px;font-size: 14px;width: 80px;">
                确认新密码
              </div>
              <el-input v-model="addForm.repassword" type="password" style="width: 240px;border-radius: 0" placeholder=""></el-input>
            </div>
            <!-- <div style="margin-top:30px;margin-left:120px">
              <el-button type="primary" @click="EnAccredit()">确定</el-button>
            </div> -->
          </div>
        </div>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="EnAccredit()">
            确定
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { onMounted,ref,watch } from 'vue'
// import { $GetSession,$GetAES } from '../api/admin'
import { Document, Menu as Setting, Fold, RefreshRight, Menu, Bell, Brush, Rank, PriceTag, ArrowDown,} from '@element-plus/icons-vue'
import { useRouter, useRoute } from "vue-router";
import { ElMessageBox,ElNotification } from 'element-plus'
import { baseURL_dev } from '../config/baseUrl'
import { ArrowRight } from '@element-plus/icons-vue'
// import { $RestPassword } from '../api/role'

  const squareUrl = ref('https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png')

  let addForm = ref({})

  addForm.value = {
    oldPassword:'',
    password:'',
    repassword:''
  }

  const EnAccredit = async() => {
      if(addForm.value.password!=addForm.value.repassword){
          ElNotification({
            title:'通知',
            message: '两次密码不一致',
            type:'error'
          })
          return
      }
      let res = ref({})
      res = await $RestPassword(addForm.value)
      console.log('res',res)
      if(res.code==0){
        dialogVisible.value = false
        ElNotification({
            title:'通知',
            message: res.message,
            type:'success'
        })
      }
  }

const input = ref('')
const dialogVisible = ref(false)
const roleSign = ref('')
const navArray = ref([])
const route = useRoute();
const router = useRouter();
const user = ref({})

watch(
() => route.path,
(newValue,oldValue) => {
  console.log('newValue',newValue)
  console.log('oldValue',oldValue)
  console.log('router',router)
  console.log('route',route)
  // navArray.value = route.matched
  navArray.value.push(route.matched[1])
  navArray.value = Array.from(new Set(navArray.value));
  console.log('navArray',navArray.value)
}
)

const goback = () => {
router.back()
}
// import { useRouter } from 'vue-router'
// import useUser from '../store/user.ts'
// let userStore = useUser()
// let router = useRouter()
onMounted(()=>{
console.log('form1111111111111111111111111')
load()
// if(!userStore.user.loginId){
  // router.push('/')
// }
})
// import { Setting } from '@element-plus/icons-vue'

const refresh = async () => {
location.reload();
}

const changePsw = async ()=>{
  dialogVisible.value = true
  // router.push('/changePsw')
}

const loginOut = async ()=>{
sessionStorage.clear();
router.push('/login')
}

const shopSet = async ()=>{

}

const load = async ()=>{
  // const session = await $GetSession()
  // console.log('session',session.data)
  // user.value = JSON.parse(sessionStorage.getItem('account'))
  // roleSign.value = JSON.parse(sessionStorage.getItem('roleSign'))
  // console.log('roleSign',roleSign.value)
  // console.log('user',user.value)
}

const User = JSON.parse(sessionStorage.getItem('account'))
console.log('User',User)

const handleOpen = (key: string, keyPath: string[]) => {
console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
console.log(key, keyPath)
}
</script>


<style scoped lang="less">
.el-menu{
  border-right: none;
}
.el-menu-item {
background-color: #161d26; /* 你想要的颜色 */
}
</style>
